<template>
   <dialog-component
     :is-show="isShow"
     :is-view="isView"
     :loading="loading"
     :title="title"
     icon="el-icon-edit-outline"
     @close="close"
     @save="save"
   >
      <template #body>
        <el-form label-position="right" ref="dataForm" :rules="rules" label-width="110px" :model="dataForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input :readonly="isView" v-model="dataForm.roleName" placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item label="角色编号" prop="roleCode">
            <el-input :readonly="isView" v-model="dataForm.roleCode" placeholder="角色编号"></el-input>
          </el-form-item>

        </el-form>
      </template>
   </dialog-component>
</template>

<script>
import dialogComponent from '@/components/dialog/dialog-component'
import VueUtil from "@/util/VueUtil";
import {NuoRoleController} from "@/actions/controller";

export default {
  name: "role-add-update-form",
  components:{
    dialogComponent
  },
  emits:["reload"],
  data(){
    return{
      isShow: false,
      loading: false,
      title: '',
      dataForm: {
        roleName: '',
        roleCode: ''
      },
      isView: true,
      rules:{
        roleName:[
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '角色名称长度为1 - 64个字符', trigger: 'blur' }
        ],
        roleCode:[
          { required: true, message: '角色编号不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '角色编号长度为1 - 64个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    init(title,data,isView = false){
      this.$nextTick(()=>{
        if(this.$refs.dataForm) this.$refs.dataForm.clearValidate()
      })
      this.title = title
      if(data){
        this.dataForm = data
      }
      this.isView = isView
      this.isShow = true
    },
    save(){
      this.loading = true
      VueUtil(this).formVerify("dataForm",()=>{
        VueUtil(this).ajax(NuoRoleController.saveRole,this.dataForm).then(res=>{
          VueUtil(this).hint(res.message)
          this.loading = false
          this.$emit("reload")
          this.close()
        }).catch(()=>{
          this.loading = false
        })
      },"loading")
    },
    close(){
      Object.assign(this.$data, this.$options.data());
    }
  }

}
</script>

<style scoped>

</style>